<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>爱学习管理后台</title>
		<meta name="description" content="">
		<meta name="author" content="templatemo">
		<!-- 
    Visual Admin Template
    http://www.templatemo.com/preview/templatemo_455_visual_admin
    -->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet' type='text/css'>
		<link href="${pageContext.request.contextPath}/back/css/font-awesome.min.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/back/css/bootstrap.min.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/back/css/templatemo-style.css" rel="stylesheet">
		<!-- 表单 -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/css/uniform.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/css/select2.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/css/matrix-style.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/css/matrix-media.css" />
		<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
		<!-- <link href="https://hanlei525.github.io/layui-v2.4.3/layui/css/layui.css" rel="stylesheet" /> -->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

	</head>

	<body>
		<div class="templatemo-flex-row">
			<div class="templatemo-sidebar">
				<header class="templatemo-site-header">
					<div class="square"></div>
					<h1>爱学习后台</h1>
				</header>
				<div class="profile-photo-container">
					<img src="images/logo.jpg" alt="Profile Photo" class="img-responsive">
					<div class="profile-photo-overlay"></div>
				</div>
				<!-- Search box -->

				<div class="mobile-menu-icon">
					<i class="fa fa-bars"></i>
				</div>
				<nav class="templatemo-left-nav">
					<ul>
						<li>
							<a href="${pageContext.request.contextPath}/back/index.jsp"><i class="fa fa-home fa-fw"></i>教师管理</a>
						</li>

						<li>
							<a href="${pageContext.request.contextPath}/back/course-management.jsp"><i class="fa fa-database fa-fw"></i>课程管理</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath}/back/manage-users.jsp"><i class="fa fa-map-marker fa-fw"></i>用户管理</a>
						</li>

						<li>
							<a href="${pageContext.request.contextPath}/back/user.jsp" class="active"><i class="fa fa-sliders fa-fw"></i>注册人数查看</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath}/ManagerServlet?op=logout"><i class="fa fa-eject fa-fw"></i>退出</a>
						</li>
					</ul>
				</nav>
			</div>
			<!-- Main content -->
			<div class="templatemo-content col-1 light-gray-bg">
				<div class="templatemo-top-nav-container">
					<div class="templatemo-top-nav-container">
						<div class="row">
							<h2>欢迎：${sessionScope.managerName}</h2>
						</div>
					</div>
				</div>
				<div class="templatemo-content-container">
					<div id="content">
						<div id="main" style="width: 1000px;height:400px;">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- JS -->
		<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/jquery-1.11.2.min.js"></script>
		<!-- jQuery -->
		<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/jquery-migrate-1.2.1.min.js"></script>
		<!--  jQuery Migrate Plugin -->
		<!-- <script type="text/javascript" src="https://www.google.com/jsapi"></script> Google Chart -->
		<!-- 表单需要 -->
		<script src="${pageContext.request.contextPath}/back/js/js/jquery.min.js"></script>
		<script src="${pageContext.request.contextPath}/back/js/js/jquery.ui.custom.js"></script>
		<script src="${pageContext.request.contextPath}/back/js/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath}/back/js/js/jquery.uniform.js"></script>
		<script src="${pageContext.request.contextPath}/back/js/js/select2.min.js"></script>
		<script src="${pageContext.request.contextPath}/back/js/js/jquery.dataTables.min.js"></script>
		<script src="${pageContext.request.contextPath}/back/js/js/matrix.js"></script>
		<script src="${pageContext.request.contextPath}/back/js/js/matrix.tables.js"></script>
		<script src="${pageContext.request.contextPath}/back/js/layer/layer.js"></script>
		<script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var datas;
			$(function() {
				if('${sessionScope.managerName}' == null || '${sessionScope.managerName}' == '') {
					location.href = "login.jsp";
				}
				$.ajax({
					url: "/LoveStudying/AccountServlet",
					dataType: "json",
					type: "get",
					data: {},
					success: function(result) {

						console.info(result);
						// 绘制图表
						myChart.setOption({
							backgroundColor: '#2c343c',

							title: {
								text: '注册人数统计',
								left: 'center',
								top: 20,
								textStyle: {
									color: '#ccc'
								}
							},

							tooltip: {
								trigger: 'item',
								formatter: '{a} <br/>{b} : {c} ({d}%)'
							},

							visualMap: {
								show: false,
								min: 80,
								max: 600,
								inRange: {
									colorLightness: [0, 1]
								}
							},
							series: [{
								name: '访问来源',
								type: 'pie',
								radius: '55%',
								center: ['50%', '50%'],
								data: result.sort(function(a, b) {
									return a.value - b.value;
								}),
								roseType: 'radius',
								label: {
									color: 'rgba(255, 255, 255, 0.3)'
								},
								labelLine: {
									lineStyle: {
										color: 'rgba(255, 255, 255, 0.3)'
									},
									smooth: 0.2,
									length: 10,
									length2: 20
								},
								itemStyle: {
									color: '#c23531',
									shadowBlur: 200,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								},

								animationType: 'scale',
								animationEasing: 'elasticOut',
								animationDelay: function(idx) {
									return Math.random() * 200;
								}
							}]
						})
					}
				})

			})
		</script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/templatemo-script.js"></script>
	</body>

</html>